<template>
    <div id="formScrollbar" class="test-form" v-loading="loading">
        <parser
            v-if="key"
            :key="key"
            :dpr="dpr"
            :is-mobile="true"
            :preview="true"
            :form-conf="formConf"
            @submit="submitForm"
        />
        <!--<input  type = "file"  accept = "image/*"  capture = "camera" @change="uploadImg">-->
        <!--<input  type = "file"  accept = "video/*"  capture = "camcorder" >-->
        <!--<input  type = "file"  accept = "audio/*"  capture = "microphone" >-->
        <!--<input  type = "file"  accept = "image/*"  multiple>-->
    </div>
</template>

<script>
/* eslint-disable */
import Parser from '../Parser'
import { dutyPerformanceApi } from '@/common/api/dutyPerformance.js'
import { Message } from 'element-ui'
// 若parser是通过安装npm方式集成到项目中的，使用此行引入
// import Parser from 'form-gen-parser'
let me

export default {
    components: {
        Parser,
    },
    props: ['taskId'],
    data() {
        return {
            key: null,
            formConf: null,
            dpr: 1,
            loading: false,
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        me = this
        const docEle = document.documentElement
        const offsetWidth = docEle.clientWidth || docEle.offsetWidth
        this.dpr = offsetWidth / 375
        this.init()
    },
    destroyed() {},
    methods: {
        async init() {
            this.loading = true
            const method = dutyPerformanceApi.getDutyPerformanceDetails
            try {
                let res = await method({ taskId: this.taskId })
                const { commands, recordJson, id, formId } = res.data
                let obj = {
                    commands,
                    recordJson,
                    taskId: id,
                    formId,
                }
                this.toParser(obj)
            } catch (e) {
                console.log(e)
            }
            this.loading = false
        },
        async toParser({ commands, formId, recordJson }) {
            if (formId) {
                try {
                    let res = await dutyPerformanceApi.getFormTemplate({
                        id: formId,
                    })
                    console.log(res)
                    this.formConf = this.setFormData({
                        res,
                        commands,
                        recordJson,
                    })
                    me.formConf.labelWidth *= me.dpr

                    me.key = +new Date() // 更新表单
                } catch (e) {
                    console.log(e)
                }
            } else {
                Message.error('未查询到表单，请检查流程内表单设置是否正常')
            }
        },
        setFormData({ res, commands, recordJson }) {
            let blankFormTemplate = res.data.blankFormTemplate
            blankFormTemplate = JSON.parse(blankFormTemplate)
            blankFormTemplate.commands = commands || []
            let recordObj = {}
            if (recordJson) {
                recordObj = JSON.parse(recordJson)
            }
            blankFormTemplate.fields.forEach(item => {
                if (item.__config__.tag === 'el-input-number') {
                    item.max = 9999
                }
                if (item.__vModel__) {
                    let key = item.__vModel__
                    let val = recordObj[key]
                    if (val) {
                        item.__config__.defaultValue = val
                    }
                }
                item.disabled = true
            })
            return blankFormTemplate
        },
        fillFormData(form, data) {
            form.fields.forEach(item => {
                const val = data[item.__vModel__]
                if (val) {
                    item.__config__.defaultValue = val
                }
            })
        },
        async submitForm(data, type) {},
    },
}
</script>

<style lang="scss" scoped>
.test-form {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    padding: 15px;
}
</style>
